<!--
 $ @Author: liujiajun 45444154+wo1261931780@users.noreply.github.com
 $ @Date: 2022-07-24 18:48:23
 $ @LastEditors: liujiajun 45444154+wo1261931780@users.noreply.github.com
 $ @LastEditTime: 2022-07-24 19:01:03
 $ @FilePath: \brand-demo\brand-demo\src\main\webapp\bbb020.html
 $ @Description: 1111
 $ @
 $ @Copyright (c) 2022 by liujiajun 45444154+wo1261931780@users.noreply.github.com, All Rights Reserved.
 -->
<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset = "UTF-8"/>
	<title>Title</title>
</head>
<body>
<div id = "showMeTable">
	<el-table
			:data = "tableData"
			@selection-change = "selectByMultiple"
			stripe
			style = "width: 100%"
	>
		<el-table-column type = "index" width = "55"></el-table-column>
		<el-table-column type = "selection" width = "55"></el-table-column>
		<el-table-column align = "center" label = "日期" prop = "date" width = "180">
		</el-table-column>
		<el-table-column align = "center" label = "姓名" prop = "name" width = "180">
		</el-table-column>
		<el-table-column align = "center" label = "地址" prop = "address">
		</el-table-column>
		<el-table-column align = "center" label = "操作" prop = "address">
			<el-button @click = "handleEdit(scope.$index, scope.row)" size = "mini"
			>编辑
			</el-button
			>
			<el-button
					@click = "handleDelete(scope.$index, scope.row)"
					size = "mini"
					type = "danger"
			>删除
			</el-button
			>
		</el-table-column>
	</el-table>
</div>

<script src = "js/axios-0.18.0.js"></script>
<script src = "js/vue.js"></script>
<!-- 引入样式 -->
<link
		href = "https://unpkg.com/element-ui/lib/theme-chalk/index.css"
		rel = "stylesheet"
/>
<!-- 引入组件库 -->
<script src = "https://unpkg.com/element-ui/lib/index.js"></script>
<script>
	new Vue({
		el: "#showMeTable",
		url: "",
		data() {
			return {
				demo: "",
				demo2: [],
				multipleSelection: [],
				tableData: [
					{
						date: "2016-05-02",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1518 弄",
					},
					{
						date: "2016-05-04",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1517 弄",
					},
					{
						date: "2016-05-01",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1519 弄",
					},
					{
						date: "2016-05-03",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1516 弄",
					},
				],
			};
		},
		methods: {
			selectByMultiple(val) {
				this.multipleSelection = val;
			},
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
		},
	});
</script>
</body>
</html>
